fix: The handset mode overlay is visible a split second for every call#3606
fix: The handset mode overlay is visible a split second for every call#3606BillCarsonFr merged 8 commits intolivekitfrom
Conversation
BillCarsonFr
added
PR-Bug-Fix
robintown
left a comment
robintown
left a comment
There was a problem hiding this comment.
CSS animations are tricky - in my testing with this PR I now can't get the earpiece overlay to show up at all. Perhaps a CSS transition would be more appropriate here?
diff --git a/src/room/EarpieceOverlay.module.css b/src/room/EarpieceOverlay.module.css
index e007fc44..e53a1974 100644
--- a/src/room/EarpieceOverlay.module.css
+++ b/src/room/EarpieceOverlay.module.css
@@ -2,40 +2,22 @@
position: fixed;
z-index: var(--call-view-overlay-layer);
inset: 0;
- display: none;
+ display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--cpd-space-2x);
-}
-
-@keyframes fade-in {
- from {
- opacity: 0;
- display: flex;
- }
- to {
- opacity: 1;
- }
+ transition: opacity 200ms;
}
.overlay[data-show="true"] {
- animation: fade-in 200ms;
-}
-
-@keyframes fade-out {
- from {
- opacity: 1;
- }
- to {
- opacity: 0;
- display: none;
- }
+ opacity: 1;
}
.overlay[data-show="false"] {
- animation: fade-out 130ms forwards;
+ opacity: 0;
pointer-events: none;
+ transition-duration: 130ms;
}
.overlay::before {(I still see the overlay "flashing" for a single frame when animating in even with this change, sadly 😕 I remember that weird visual issue has been there from the start.)
I did setup a playwright framework to test mobile, and earpiece mode. I udpated the css to set the display as a static property of the selector, and then just animate the opacity (instead of "animating the display") So the default is |
robintown
left a comment
robintown
left a comment
There was a problem hiding this comment.
The fade-out animation doesn't appear to be working any more (this is most apparent if you set the durations to 10x their normal values).
Screencast.From.2025-12-03.12-26-22.webm
Like we discussed, ditching the animations is probably fine, if you'd prefer to remove that CSS (But the above transition approach does actually work I think?)
| asMobile: async ({ browser }, puse) => { | ||
| const fixtures = await createCallAndInvite(browser); | ||
| await puse({ |
There was a problem hiding this comment.
| asMobile: async ({ browser }, puse) => { | |
| const fixtures = await createCallAndInvite(browser); | |
| await puse({ | |
| asMobile: async ({ browser }, pUse) => { | |
| const fixtures = await createCallAndInvite(browser); | |
| await pUse({ |
So I know how to pronounce it :)
There was a problem hiding this comment.
eslint_does_not_want_that_we_call_it_use ? 🤣
| const { creatorPage, inviteLink } = asMobile; | ||
|
|
||
| // test("Show earpiece overlay when output is earpiece", async ({ browser }) => { | ||
| // Use reduce motion to disable animations that are making the tests a bit flaky |
There was a problem hiding this comment.
Looks like this comment belongs in the other file
There is still a small glitch, when earpiece overlay switches from hidden to visible there is a quick initial flash of the overlay background. |
toger5
left a comment
toger5
left a comment
There was a problem hiding this comment.
There is still a small glitch, when earpiece overlay switches from hidden to visible there is a quick initial flash of the overlay background.
This is still a great improvement to the current state.
There was a problem hiding this comment.
Its nice to see that simplifying the css improved it.
3 participants
At the start of every all the
Handset Modewas visible a split secondThe problem is that the
Overlayis initialy shown visible (display: flex) and immediatly fade outAs a fix I propose to start in
display: none, and then letfade-inorfade-outupdate the visibility.I have not been able to create a playwright test for that. It appears that playwright waits for stable states, so I couldn't find a way to catch the overlay that is only appearing briefly